<!doctype html>
<html>
<head>
  <title>core-animated-pages</title>

  <script src="../../platform/platform.js"></script>
  <link href="../../core-icons/av-icons.html" rel="import">
  <link href="../../paper-fab/paper-fab.html" rel="import">

  <link href="../core-animated-pages.html" rel="import">
  <link href="../transitions/slide-up.html" rel="import">
  <link href="../transitions/list-cascade.html" rel="import">

  <style>
    body {
      font-family: 'Roboto 2', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      margin: 0;
      background: #f1f1f1;
    }

    quiz-demo {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
  </style>
</head>
<body>

  <polymer-element name="quiz-demo">
  <template>

    <style>
      core-animated-pages {
        height: 100%;
      }

      section {
        overflow: hidden;
      }

      .fab {
        position: absolute;
        fill: #fff;
      }

      .fab-0 {
        bottom: 50px;
        right: 24px;
      }

      .fab-1 {
        top: 210px;
        right: 24px;
      }

      paper-fab {
        background-color: #ff4081;
      }

      .top {
        background-color: #ffff8d;
      }

      .top-image {
        background: url(quiz1-intro.png);
        height: 287px;
        width: 202px;
      }

      .bottom {
        box-sizing: border-box;
        position: relative;
        height: 80px;
        background-color: #ffeb3b;
        padding: 24px;
        color: #fff;
        font-size: 32px;
      }

      .tall-toolbar {
        box-sizing: border-box;
        height: 240px;
        position: relative;
        color: #fff;
        padding: 48px;
        font-size: 48px;
      }

      .tall-toolbar.categories {
        background-color: #00bbd3;
        margin-bottom: 2px;
      }

      .tall-toolbar.questions {
        background-color: #ffeb3b;
      }

      .middle {
        background-color: #fafafa;
        color: #3f3f3f;
        padding: 24px 48px;
        font-size: 24px;
        line-height: 1.5;
      }

      .footer {
        height: 80px;
      }

      .avatar {
        height: 80px;
        width: 80px;
        background-color: #ff80ab;
      }

      .footer-right, .score {
        border-top: 1px solid #ccc;
        background-color: #fff;
        padding: 30px;
      }

      .tile {
        box-sizing: border-box;
        float: left;
        height: 200px;
        width: 49%;
        margin: 3px;
      }

      .tile-bottom {
        padding: 8px;
        color: #fff;
      }
    </style>

    <core-animated-pages selected="{{page}}" transitions="hero-transition slide-up slide-down cross-fade list-cascade" on-core-animated-pages-transition-end="{{complete}}">

      <section layout vertical>

        <div class="tall-toolbar categories" slide-down>
          <span>Your name here</span>
        </div>

        <div class="tiles-container">
          <div class="tile" style="background-color:#ccc;" layout vertical>
            <div class="tile-top" flex></div>
            <div class="tile-bottom" style="background-color:#aaa;">
              Leaderboard
            </div>
          </div>
          <div class="tile" hero-id="category-image" hero style="background-color:#ffff8d;" layout vertical on-tap="{{transition}}">
            <div class="tile-top" flex></div>
            <div class="tile-bottom" hero-id="footer" hero style="background-color:#ffeb3b;">
              General Knowledge
            </div>
          </div>
          <div class="tile" style="background-color:#b9f6ca;" layout vertical>
            <div class="tile-top" flex></div>
            <div class="tile-bottom" style="background-color:#0f9d58;">
              Category 2
            </div>
          </div>
          <div class="tile" style="background-color:#ff8a80;" layout vertical>
            <div class="tile-top" flex></div>
            <div class="tile-bottom" style="background-color:#db4437;">
              Category 3
            </div>
          </div>
          <div class="tile" style="background-color:#82b1ff;" layout vertical>
            <div class="tile-top" flex></div>
            <div class="tile-bottom" style="background-color:#4285f4;">
              Category 4
            </div>
          </div>
          <div class="tile" style="background-color:#b388ff;" layout vertical>
            <div class="tile-top" flex></div>
            <div class="tile-bottom" style="background-color:#7e57c2;">
              Category 5
            </div>
          </div>
        </div>

      </section>

      <section layout vertical>

        <div class="top" hero-id="category-image" hero flex layout horizontal center center-justified>
          <div class="top-image" cross-fade></div>
        </div>
        <div class="bottom" hero-id="footer" hero cross-fade>
          <span cross-fade>General Knowledge</span>
        </div>
        <div class="fab fab-0" hero-id="fab" hero>
          <paper-fab icon="av:play-arrow" on-tap="{{transition}}" hero></paper-fab>
        </div>
      </section>

      <section layout vertical>

        <div class="tall-toolbar questions" hero-id="footer" hero>
          <span cross-fade>Question here</span>
        </div>
        <div class="fab fab-1" hero-id="fab" hero>
          <paper-fab icon="av:play-arrow" on-tap="{{transition}}" hero></paper-fab>
        </div>

        <div flex class="middle" slide-up list-cascade>
          <p>Option 1</p>
          <p>Option 2</p>
          <p>Option 3</p>
          <p>Option 4</p>
          <p>Option 5</p>
        </div>

        <div class="footer" layout horizontal slide-up>
          <div class="avatar"></div>
          <div class="footer-right" flex>
            some text here
          </div>
          <div class="score">
            32 pts
          </div>
        </div>

      </section>

    </core-animated-pages>

  </template>
  <script>

    Polymer('quiz-demo', {

      page: 0,

      transition: function(e) {
        if (this.page === 2) {
          this.page = 0;
        } else {
          this.page += 1;
        }
      }
    });

  </script>
  </polymer-element>

  <quiz-demo></quiz-demo>
</body>
</html>
